require('../../less/controls/toolbar.less');
var React = require('react');
var ButtonGroup = require('./ButtonGroup');

module.exports = React.createClass({
	displayName:'ToolBar',
	getInitialState:function(){
		return {

		}
	},
	componentDidMount:function(){

	},
	__onClick: function (event){
		this.props.onClick && this.props.onClick(this.props, event);
	},
	render:function(){
		return (
			<div className="c-toolbar" style={{ height: "100%", lineHeight: this.props.height+'px' }} >
				<div className="c-toolbar-title" >
					{
						this.props.icon && <span className={"icon fa " + this.props.icon}></span>
					}
					{
						this.props.title && <span className="title">{this.props.title}</span>
					}
				</div>
				<div className="c-toolbar-btngroup" >
					<ButtonGroup items={this.props.items} floatDirection={this.props.floatDirection}>
						{this.props.children}
					</ButtonGroup>
				</div>
			</div>
		);
	}
});
